<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' dir='ltr'>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <link rel='stylesheet' type='text/css' href='http://www.extjs.com/deploy/dev/resources/css/ext-all.css' />
    <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.r60.js"></script><![endif]-->
    <script language="javascript" type='text/javascript' src='jquery.js'></script>
    <script language="javascript" type='text/javascript' src='http://www.extjs.com/deploy/dev/adapter/jquery/ext-jquery-adapter.js'></script>
    <script language="javascript" type='text/javascript' src='http://www.extjs.com/deploy/dev/ext-all-debug.js'></script>
    <script language="javascript" type='text/javascript' src='http://www.extjs.com/deploy/dev/source/locale/ext-lang-ja.js'></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.trunk.js"></script>

    <link rel='stylesheet' type='text/css' href='Flot.css' />
    <script language="javascript" type="text/javascript" src="Flot.js"></script>
    <script language="javascript" type="text/javascript" src="BarFlot.js"></script>
	<script language="javascript" type="text/javascript">
/*
var getSeries1=function(vEl){
    Ext.Ajax.request({
        url:'test.php',params:{op:vEl.id},
        success:function(resp){
            if(resp.responseText=="ERROR")    {
                alert("ERROR values not found!");
                return false;
            }
			var newData = Ext.util.JSON.decode(resp.responseText);
			vEl.updateData(newData);
        },
        failure:function(){em.alert("SYSTEM ERROR");}
    });
};
*/

var sJson1 = [ 
  {"name":4297,"mods":17,"stats":0},
  {"name":4296,"mods":12,"stats":0},
  {"name":4295,"mods":14,"stats":0},
  {"name":4294,"mods":10,"stats":0},
  {"name":4293,"mods":7, "stats":0},
  {"name":4292,"mods":9, "stats":0},
  {"name":4291,"mods":12,"stats":16.3},
  {"name":4290,"mods":18,"stats":13.2},
  {"name":4289,"mods":17,"stats":20.0},
  {"name":4288,"mods":15,"stats":4.3},
  {"name":4287,"mods":14,"stats":10.3},
  {"name":4286,"mods":12,"stats":2.2},
  {"name":4285,"mods":11,"stats":3.2},
  {"name":4284,"mods":10,"stats":8.5},
  {"name":4283,"mods":10,"stats":5.7} 
];

var sJson2 = [ 
  {"name":5293,"mods":7, "stats":9.2},
  {"name":5292,"mods":9, "stats":8.3},
  {"name":5291,"mods":12,"stats":16.3},
  {"name":5290,"mods":18,"stats":13.2},
  {"name":5289,"mods":17,"stats":20.0},
  {"name":5288,"mods":15,"stats":4.3},
  {"name":5287,"mods":14,"stats":10.3},
  {"name":5286,"mods":12,"stats":2.2},
  {"name":5285,"mods":11,"stats":3.2},
  {"name":5284,"mods":10,"stats":8.5},
  {"name":5283,"mods":10,"stats":5.7},
  {"name":5282,"mods":17,"stats":2.4},
  {"name":5281,"mods":12,"stats":0.4},
  {"name":5280,"mods":14,"stats":1.2},
  {"name":5279,"mods":10,"stats":7.8}
];

x = 0;
Ext.onReady(function() {
	var flot = new Ext.ux.BarFlot({
	  id:'tp2',
	  title:'Bars',
	  applyTo: 'placeholder',
	  width: 500, 
	  height: 500,
	  cls: 'x-panel-body',
	  crosshair: {mode:"y"},
	  yaxis: {tickSize:5, tickDecimals:0},
	  series:[
	    {name: 'mods',  label: 'Number of mods of last 15 calls', color: '#FF0000', dataIndex:0},
	    {name: 'stats', label: 'Number of changes of last 15 calls', color: '#0000FF', dataIndex:1}
	  ],
	  data:[],
	}); 
	flot.show();

	var task = new Ext.util.DelayedTask(function() {
		var data = (x % 2 == 0) ? sJson1 : sJson2;
		this.updateData(data);
		x += 1;
		task.delay(1000);
	}, flot);
	task.delay(1000);
});

	</script>
    <style type='text/css'>
      ul.circle { list-style-type: circle; list-style-position: inside; }
    </style>
    <title>Ext Flot (Flot as Ext JS) From loginfabio</title>
  </head>
  <body>
    <div id="placeholder"></div>
  </body>
</html>


